<template>
   <h2>reactive的使用</h2>
   <h3>性别：{{user.gender}}</h3>
    <h3>名字:{{user.name}}</h3>
    <h3>年龄:{{user.age}}</h3>
    <h3>媳妇:{{user.wife.name}}</h3>
    <h3>媳妇的车：{{user.wife.cars}}</h3>
    <h3>媳妇的狗：{{user.wife.dog}}</h3>
    <button @click=updateUSer>更新数据</button>
    </template>

<script lang="ts">
    import {
        defineComponent,

        reactive
    } from 'vue';

    export default defineComponent({
        name: 'App',
        //把数据变成响应式的数据
        //响应式转行是深层的：会影响对象内部所有嵌套的属性 内部是基于es6的proxy实现  通过代理对象操作源对象内部数据都是响应式的

        setup() {
            // const obj: any = ({
            const obj = ({
                    name: '小明',
                    age: 33,
                    wife: {
                        name: '小红',
                        age: 18,
                        cars: ['奔驰', '宝马'],
                        dog: {
                            name: '团团',
                            age: 1
                        }
                    }
                })
                //user现在是代理对象  obj是目标对象  直接s使用目标对象的方式来更新目标对象中的成员的值是不可能的，只能使用代理对象的方式来更新数据（响应式数据）
                //user对象的类型是Proxy
            const user = reactive < any > (obj)
            console.log(user);
            //方法
            const updateUSer = () => {
                // //obj.name = 'xxx'这种写法不写
                // user.name = '大张伟'
                // user.age++
                //     user.wife.cars[2] = '玛莎拉蒂'
                //user代理对象 obj目标对象  
                //需求 两个对象添加一个新的属性 哪一个方式会影响界面的更新 只能代理对象来 而且这个数据最终也添加到obj对象上了
                //移除一个已经存在的属性 哪一个方式会影响
                // obj.gender = '男' 渲染不了界面
                user.gender = '男'
                    // delete obj.age//界面没有渲染  obj对象也没有被删除
                delete user.age //可以删除可以渲染

            }
            return {
                user,
                updateUSer
            }
        }

    });
</script>

<style>

</style>